<template>
  <div class="box">
    <header class="header">
      <div class="left" @click="$router.back()">
        <van-icon name="arrow-left" size="18"/>
      </div>
      <div class="centerbox">
        <van-field v-model="keyword" placeholder="请输入搜索关键词" />
      </div>
      <div class="right" @click="search">
        <span>搜索</span>
      </div>
    </header>
    <div class="content">
      <div class="panelbox">
        <h3>
          历史搜索
          <van-icon name="delete-o" class="deleteIcon" @click="clearHistory"/>
        </h3>
        <div v-if="searchList.length > 0">
          <van-tag
            @click="searchKeyword(item)"
            color="#f7f7f7" text-color="#333" class="tagslist" v-for="(item,index) of searchList" :key="index">{{ item }}</van-tag>
        </div>
        <div v-else style="text-align: center;color:#999">暂无历史搜索</div>
        <h3>热门搜索</h3>
        <van-tag color="#f7f7f7"
          :text-color="index > 2 ? '#666' : '#ff6666'"
          class="tagslist"
          v-for="(item,index) of hotList"
          :key="item.wordid"
          @click="searchKeyword(item.keyword)"
          >{{ item.keyword }}</van-tag>
      </div>

    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Field, Tag, Toast } from 'vant'
import { getHotword } from '@/api/search'
import { getStorage, removeStorage, setStorage } from '../../utils/storage'
Vue.use(Field)
Vue.use(Tag)
Vue.use(Toast)
export default {
  data () {
    return {
      keyword: '',
      hotList: [],
      searchList: []
    }
  },
  mounted () {
    getHotword().then(res => {
      this.hotList = res.data.data
    })
    this.searchList = getStorage('searchList') ? JSON.parse(getStorage('searchList')) : []
  },
  methods: {
    searchKeyword (keyword) { // 点击热门搜索，填充到输入框
      this.keyword = keyword
      this.$router.push('/searchresult?keyword=' + this.keyword)
    },
    clearHistory () {
      removeStorage('searchList')
      this.searchList = getStorage('searchList') ? JSON.parse(getStorage('searchList')) : []
    },
    search () { // ["手机", "电脑"]
      if (this.keyword.trim() === '') { // 点击搜索，判断数据是不是为空
        Toast('请输入搜索的关键词')
      } else {
        const arr = getStorage('searchList') ? JSON.parse(getStorage('searchList')) : []
        const index = arr.findIndex(item => item === this.keyword)
        if (index === -1) {
          arr.unshift(this.keyword)
        } else {
          arr.splice(index, 1)
          arr.unshift(this.keyword)
        }
        setStorage('searchList', JSON.stringify(arr))
        // 重置列表数据
        this.searchList = getStorage('searchList') ? JSON.parse(getStorage('searchList')) : []

        this.$router.push('/searchresult?keyword=' + this.keyword)
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.van-cell {
  padding 5px 16px
  border-radius 15px
  background-color #f7f7f7
}
.header
  display flex
  color #666
  background-color #fff
  .left
    width 60px
    display flex
    justify-content center
    align-items center
  .centerbox
    flex  1
    display flex
    justify-content center
    align-items center
    .searchbox
      width 100%
      height 30px
      background-color #fff
      border-radius 15px
      text-indent 24px
      line-height 30px
      color #999
  .right
    display flex
    justify-content center
    align-items center
    width 60px
.container .box .header {
    height: 0.44rem;
    background-color: #fff;
}
.panelbox
  background-color #ffffff
  padding 15px
  .tagslist
    margin 4px
    padding 5px 8px
.deleteIcon
  float right
</style>
